<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_Storage-Storage的操作</title>
  <!-- 
  在 JavaScript 中，Web Storage API 提供了两种存储机制： `localStorage`  和  `sessionStorage` 。这两种存储机制允许开发者在用户的浏览器中存储数据。
  1. Web Storage 的基本概念
  - localStorage：用于存储持久性数据，数据会在浏览器关闭后继续存在，直到被显式删除。
  - sessionStorage：用于存储会话数据，数据在浏览器标签页或窗口关闭后会被清除。

  2. 基本操作
   2.1. 存储数据
  使用  `setItem`  方法将数据存储到  `localStorage`  或  `sessionStorage`  中。

  示例代码：
  // 存储数据
  localStorage.setItem('key', 'value'); // 存储到 localStorage
  sessionStorage.setItem('sessionKey', 'sessionValue'); // 存储到 sessionStorage
   2.2. 获取数据

  使用  `getItem`  方法从  `localStorage`  或  `sessionStorage`  中获取数据。

  示例代码：
  // 获取数据
  const value = localStorage.getItem('key'); // 从 localStorage 获取
  const sessionValue = sessionStorage.getItem('sessionKey'); // 从 sessionStorage 获取
   2.3. 删除数据
  使用  `removeItem`  方法从  `localStorage`  或  `sessionStorage`  中删除指定的键值对。

  示例代码：
  // 删除数据
  localStorage.removeItem('key'); // 从 localStorage 删除
  sessionStorage.removeItem('sessionKey'); // 从 sessionStorage 删除
   2.4. 清空存储
  使用  `clear`  方法可以清空  `localStorage`  或  `sessionStorage`  中的所有数据。

  示例代码：
  // 清空存储
  localStorage.clear(); // 清空 localStorage
  sessionStorage.clear(); // 清空 sessionStorage
  3. 数据类型
  - Web Storage API 只支持将数据存储为字符串。如果需要存储对象或数组，可以使用  `JSON.stringify()`  将其转换为字符串，取出时使用  `JSON.parse()`  进行解析。

  示例代码：
  // 存储对象
  const obj = { name: 'Alice', age: 25 };
  localStorage.setItem('user', JSON.stringify(obj));

  // 获取对象
  const retrievedUser = JSON.parse(localStorage.getItem('user'));
  console.log(retrievedUser.name); // 输出: Alice
  4. 存储限制

  -  `localStorage`  和  `sessionStorage`  的存储大小通常为 5-10 MB，具体取决于浏览器。超出限制时，尝试存储更多数据会导致错误。

  5. 总结
  - localStorage 和 sessionStorage 是用于存储数据的两种机制，分别用于持久性和会话数据。
  - 使用  `setItem` 、 `getItem` 、 `removeItem`  和  `clear`  方法进行数据操作。
  - 数据存储为字符串，使用  `JSON.stringify()`  和  `JSON.parse()`  处理对象或数组。
  - 存储大小有限制，通常为 5-10 MB。
  -->
</head>
<body>

  <script>
    let token = localStorage.getItem('token');
    if (!token) {
      token = '123456';
      // 存储数据
      localStorage.setItem('token', token);
    }

    // 获取数据
    let token2 = localStorage.getItem('token');
    console.log(token2)

    // 后续的操作
    console.log(token.length)
    console.log(token + "localStorage")

    // 删除数据
    localStorage.removeItem('token');

    // 清空存储
    localStorage.clear();
    

  </script>
  
</body>
</html>